<script setup lang="ts">
import { ref } from 'vue'
import type { CarouselRef } from 'ant-design-vue/es/carousel'
import useCarousel from '@/hook/carousel'

export interface CarItem {
  carId: string
  carName: string
  imgUrl: string
  value: string
}

withDefaults(
  defineProps<{
    datas2D: CarItem[][]
  }>(),
  {}
)

const containerRef = ref<HTMLDivElement>()

const carouselRef = ref<CarouselRef>()

useCarousel(containerRef, carouselRef)
</script>

<template>
  <div ref="containerRef" class="carousel">
    <a-carousel
      v-if="datas2D?.length"
      ref="carouselRef"
      class="car-carousel"
      arrows
      :autoplay="true"
      :autoplaySpeed="5000"
      :dots="false"
    >
      <template #prevArrow>
        <SvgIcon class="arrow-left" name="order-chart-slider-left" :size="16" />
      </template>
      <template #nextArrow>
        <SvgIcon class="arrow-right" name="order-chart-slider-right" :size="16" />
      </template>
      <div v-for="(carDatas, index) in datas2D" :key="index">
        <div class="car-item">
          <div
            class="item"
            v-for="carData in carDatas"
            :key="carData.carId"
            :class="{ 'more-row': carDatas.length > 3 }"
          >
            <div class="img">
              <img :src="carData.imgUrl" />
            </div>
            <div class="name">{{ carData.carName }}</div>
            <div class="value">{{ carData.value }}</div>
          </div>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<style lang="less" scoped>
.carousel {
  height: 100%;
}
.car-carousel {
  height: 100%;
  :deep(.slick-slider) {
    height: 100%;
    .slick-list {
      height: 100%;
      .slick-track {
        height: 100%;
        .slick-slide {
          height: 100%;
          & > div {
            height: 100%;
            & > div {
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.arrow-left {
  left: 10px;
  z-index: 9;
}
.arrow-right {
  right: 10px;
  z-index: 9;
}
.car-item {
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // gap: 34px;
  margin: 0 32px;
  .item {
    height: 100%;
    // width: calc((100% - 34px * 2) / 3);
    width: calc(100% / 3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Alibaba PuHuiTi 2;
    font-size: 14px;
    line-height: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    &.more-row {
      height: 50%;
    }
    .img {
      display: flex;
      align-items: center;
      max-width: 100%;
      // height: 42px;
      height: calc(100% - 40px);
      min-height: 10px;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .name {
      color: #c3caf8;
      white-space: nowrap;
    }
    .value {
      color: #fff;
    }
  }
}
</style>
